<template>
   <div class="author-set-basic-setup">
      <div class="header-title">
         <div class="title-name">账号安全</div>
         <div class="title-content">
         </div>
      </div>
      <div class="content">
         <div class="box">
            <!-- 我的邮箱 -->
            <div class="box-item">
               <div class="box-item-left" style="background-color: #dd445b;">
                  <span class="iconfont icon-youxiang"></span>
               </div>
               <div class="box-item-right">
                  <div class="right-name">我的邮箱</div>
                  <div class="right-desc">绑定邮箱后即可使用邮箱登录</div>
                  <div class="right-btn" v-if="AuthorInfo.usermail">
                     <div class="b1">已绑定</div>
                     <div class="b2" @click="clickDialog('email')">更改邮箱</div>
                  </div>
                  <div class="right-btn" v-else>
                     <div class="b3" @click="emailDialogVisible = true">立即绑定</div>
                  </div>
               </div>
            </div>
            <!-- 我的手机 -->
            <div class="box-item">
               <div class="box-item-left" style="background-color: #00bcd4;">
                  <span class="iconfont icon-shouji2"></span>
               </div>
               <div class="box-item-right">
                  <div class="right-name">我的手机</div>
                  <div class="right-desc">绑定手机后即可使用手机号登录</div>
                  <div class="right-btn" v-if="AuthorInfo.useraccount === true">
                     <div class="b1">已绑定</div>
                     <div class="b2" @click="clickDialog('phone')">更改手机</div>
                  </div>
                  <div class="right-btn" v-else>
                     <div class="b3" @click="phoneDialogVisible = true">立即绑定</div>
                  </div>
               </div>
            </div>
            <!-- 我的密保 -->
            <div class="box-item">
               <div class="box-item-left" style="background-color: #795548;">
                  <span class="iconfont icon-mibao"></span>
               </div>
               <div class="box-item-right">
                  <div class="right-name">密保问题</div>
                  <div class="right-desc">设置密保，账号更安全</div>
                  <div class="right-btn" v-if="false">
                     <div class="b1">已设置</div>
                     <div class="b2" @click="clickDialog('password')">查看并设置</div>
                  </div>
                  <div class="right-btn" v-else>
                     <div class="b3" @click="securityDialogVisible = true">设置密保</div>
                  </div>
               </div>
            </div>
            <!-- 设置密码 -->
            <div class="box-item">
               <div class="box-item-left" style="background-color: #e0a800;">
                  <span class="iconfont icon-mima"></span>
               </div>
               <div class="box-item-right">
                  <div class="right-name">设置密码</div>
                  <div class="right-desc">设置密码后即可使用账号登录</div>
                  <div class="right-btn">
                     <div class="b1">已设置</div>
                     <div class="b2" @click="clickDialog('password')">修改密码</div>
                  </div>
               </div>
            </div>
            <!-- 绑定QQ -->
            <div class="box-item">
               <div class="box-item-left" style="background-color: #43acff;">
                  <span class="iconfont icon-qq1"></span>
               </div>
               <div class="box-item-right">
                  <div class="right-name">第三方QQ账号</div>
                  <div class="right-desc">绑定QQ账号后即可使用QQ登录</div>
                  <div class="right-btn" v-if="AuthorInfo.openid_qq">
                     <div class="b1">已绑定</div>
                     <div class="b2" @click="">解除绑定</div>
                  </div>
                  <div class="right-btn" v-else>
                     <div class="b3">绑定QQ</div>
                  </div>
               </div>
            </div>
            <!-- 绑定微信 -->
            <div class="box-item">
               <div class="box-item-left" style="background-color: #4caf71;">
                  <span class="iconfont icon-weixin1"></span>
               </div>
               <div class="box-item-right">
                  <div class="right-name">第三方微信账号</div>
                  <div class="right-desc">绑定微信账号后即可使用微信登录</div>
                  <div class="right-btn" v-if="AuthorInfo.openid_wx">
                     <div class="b1">已绑定</div>
                     <div class="b2" @click="">解除绑定</div>
                  </div>
                  <div class="right-btn" v-else>
                     <div class="b3">绑定微信</div>
                  </div>
               </div>
            </div>
         </div>

         <!-- 请选择验证方式，更爱邮箱，更改密码，弹窗 -->
         <el-dialog v-if="centerDialogVisible" v-model="centerDialogVisible" :title="state.title" width="700px" center
            :close-on-press-escape="false" :close-on-click-modal="false" :before-close="beforeClose">
            <!-- 验证方式 -->
            <div class="verification-mode" v-if="verifyMode === ''">
               <div class="mode-item" v-if="AuthorInfo.userphone">
                  <div class="item-content">
                     <div class="content-left" style="background-color: #00BCD4;">
                        <span class="iconfont icon-shouji2" style="font-size: 68px;"></span>
                     </div>
                     <div class="content-right">
                        <div class="name">通过手机验证</div>
                        <div class="desc">如果你的绑定手机可用，则可通过绑定的手机发送验证码修改</div>
                     </div>
                  </div>
                  <div class="item-btn">
                     <button style="margin: 0 0 0 20px;height: 40px;border-radius: 10px;
                        background: #FFF;
                        color: #777;" @click="selectVerifyMode('phone')">立即验证</button>
                  </div>
               </div>
               <div class="mode-item" v-if="AuthorInfo.usermail">
                  <div class="item-content">
                     <div class="content-left">
                        <span class="iconfont icon-youxiang"></span>
                     </div>
                     <div class="content-right">
                        <div class="name">通过邮箱验证</div>
                        <div class="desc">如果你的账号绑定邮箱，则可通过向绑定邮箱发送验证码修改</div>
                     </div>
                  </div>
                  <div class="item-btn">
                     <button style="margin: 0 0 0 20px;height: 40px;border-radius: 10px;
                        background: #FFF;
                        color: #777;" @click="selectVerifyMode('email')">立即验证</button>
                  </div>
               </div>
               <div class="mode-item">
                  <div class="item-content">
                     <div class="content-left" style="background-color: #795548;">
                        <span class="iconfont icon-wenhao" style="font-size: 77px;"></span>
                     </div>
                     <div class="content-right">
                        <div class="name">以上方式都不可用？</div>
                        <div class="desc">如果您的原手机号，邮箱已经无法使用，建议找回账号</div>
                     </div>
                  </div>
                  <div class="item-btn">
                     <button style="margin: 0 0 0 20px;height: 40px;background-color: #795548;">找回账号</button>
                  </div>
               </div>
            </div>
            <!-- 手机验证 -->
            <div class="mode" v-if="verifyMode === 'phone'">
               <el-steps :active="active" simple>
                  <el-step title="验证身份" />
                  <el-step title="绑定邮箱" v-if="state.changeType === 'email'" />
                  <el-step title="绑定手机" v-if="state.changeType === 'phone'" />
                  <el-step title="设置密码" v-if="state.changeType === 'password'" />
                  <el-step title="绑定成功" v-if="state.changeType === 'email'" />
                  <el-step title="绑定成功" v-if="state.changeType === 'phone'" />
                  <el-step title="改密成功" v-if="state.changeType === 'password'" />
               </el-steps>
               <div class="mode-form">
                  <div class="form-top">
                     <div class="name">原手机号</div>
                     <div class="email">{{ AuthorInfo.userphone }}</div>
                  </div>
                  <div style="margin: 10px 15px 15px;color: #43acff;cursor: pointer;">
                     <span @click="verifyMode = '', active = 0, state.title = '请选择验证方式'">更换其他验证方式</span>
                  </div>
                  <div class="form-bottom">
                     <input type="text" placeholder="验证码" style="flex: 1;">
                     <button style="margin: 0 0 0 20px;height: 45px;border-radius: 10px;
                        background: #FFF;
                        color: #777;">获取验证码</button>
                  </div>
                  <div class="form-btn">
                     <button style="margin: 0 0 0 20px;height: 42px;border-radius: 6px;">下一步</button>
                  </div>
               </div>
            </div>
            <!-- 邮箱验证 -->
            <div class="mode" v-if="verifyMode === 'email'">
               <el-steps :active="active" simple>
                  <el-step title="验证身份" />
                  <el-step title="绑定邮箱" v-if="state.changeType === 'email'" />
                  <el-step title="绑定手机" v-if="state.changeType === 'phone'" />
                  <el-step title="设置密码" v-if="state.changeType === 'password'" />
                  <el-step title="绑定成功" v-if="state.changeType === 'email'" />
                  <el-step title="绑定成功" v-if="state.changeType === 'phone'" />
                  <el-step title="改密成功" v-if="state.changeType === 'password'" />
               </el-steps>
               <!-- 第一步 -->
               <div class="mode-form" v-if="active === 0">
                  <div class="form-top">
                     <div class="name">原邮箱号</div>
                     <div class="email">{{ AuthorInfo.usermail }}</div>
                  </div>
                  <div style="margin: 10px 15px 15px;color: #43acff;cursor: pointer;">
                     <span @click="verifyMode = '', active = 0, state.title = '请选择验证方式'">更换其他验证方式</span>
                  </div>
                  <div class="form-bottom">
                     <input type="text" v-model="mailcode" placeholder="验证码" style="flex: 1;">
                     <button style="margin: 0 0 0 20px;height: 45px;border-radius: 10px;
                        background: #FFF;
                        color: #777;" @click="sendUsermail">获取验证码</button>
                  </div>
                  <div class="form-btn">
                     <button style="margin: 0 0 0 20px;height: 42px;border-radius: 6px;"
                        @click="verifyUsermail">下一步</button>
                  </div>
               </div>
               <!-- 第二步 -->
               <!-- 绑定邮箱 -->
               <div class="mode-form" v-if="active === 1 && state.changeType === 'email'">
                  <div class="form-top" style="margin-bottom: 20px;">
                     <div class="name">新邮箱号</div>
                     <input type="text" v-model="mailValue" placeholder="email" style="flex: 1;height: 42px;
                           background-color: #FFF;
                           border-radius: 0px;">
                  </div>
                  <div class="form-bottom">
                     <input type="text" v-model="mailValueCode" placeholder="验证码" style="flex: 1;">
                     <button style="margin: 0 0 0 20px;height: 45px;border-radius: 10px;
                        background: #FFF;
                        color: #777;" @click="sendUsermailNew">获取验证码</button>
                  </div>
                  <div class="form-btn">
                     <!-- <button style="margin: 0 0 0 20px;height: 42px;border-radius: 6px;"
                        @click="changeUserMail">下一步</button> -->
                     <el-button style="margin: 0 0 0 20px;height: 42px;border-radius: 6px;" type="primary"
                        :loading="loading2" @click="changeUserMail">下一步</el-button>
                  </div>
               </div>
               <!-- 修改密码 -->
               <div class="mode-form" v-if="active === 1 && state.changeType === 'password'">
                  <div class="form-bottom">
                     <input type="password" v-model="newPassword1" placeholder="新密码" style="flex: 1;">
                  </div>
                  <div class="form-bottom">
                     <input type="password" v-model="newPassword2" placeholder="确认新密码" style="flex: 1;">
                  </div>
                  <div class="form-btn">
                     <!-- <button style="margin: 0 0 0 20px;height: 42px;border-radius: 6px;"
                        @click="changeUserPassword">下一步</button> -->
                     <el-button style="margin: 0 0 0 20px;height: 42px;border-radius: 6px;" type="primary"
                        :loading="loading" @click="changeUserPassword">下一步</el-button>
                  </div>
               </div>
               <!-- 第三步 -->
               <div class="mode-form" v-if="active === 2">
                  <el-result icon="success" title="操作成功" sub-title="operate successfully">
                  </el-result>
               </div>
            </div>
         </el-dialog>


         <!-- 绑定邮箱弹窗 -->
         <el-dialog v-if="emailDialogVisible" v-model="emailDialogVisible" title="绑定邮箱号" width="450px" center
            :close-on-press-escape="false" :close-on-click-modal="false">
            <div>
               <input type="text" v-model="email" placeholder="邮箱号">
               <div style="display: flex;align-items: center;margin: 20px 0;">
                  <input type="text" v-model="emailcode" placeholder="验证码" style="flex: 1;">
                  <button style="margin: 0 0 0 20px;height: 45px;" @click="getemailcode">获取证码</button>
               </div>
               <div style="display: flex;justify-content: center;">
                  <button style="margin: 0 ;height: 45px;width: 160px;" @click="emailbinding">立即绑定</button>
               </div>
            </div>
         </el-dialog>

         <!-- 绑定手机弹窗 -->
         <el-dialog v-if="phoneDialogVisible" v-model="phoneDialogVisible" title="绑定手机号" width="450px" center
            :close-on-press-escape="false" :close-on-click-modal="false">
            <div>
               <input type="text" placeholder="手机号">
               <div style="display: flex;align-items: center;margin: 20px 0;">
                  <input type="text" placeholder="验证码" style="flex: 1;">
                  <button style="margin: 0 0 0 20px;height: 45px;">获取短信验证码</button>
               </div>
               <div style="display: flex;justify-content: center;">
                  <button style="margin: 0 ;height: 45px;width: 160px;">立即绑定</button>
               </div>
            </div>
         </el-dialog>

         <!-- 设置密保弹窗 -->
         <el-dialog v-if="securityDialogVisible" v-model="securityDialogVisible" title="设置密保问题" width="450px" center
            :close-on-press-escape="false" :close-on-click-modal="false">
            <div>
               132
            </div>
         </el-dialog>

      </div>
   </div>
</template>
<script lang="ts" setup >
import { ElMessage } from 'element-plus';
const props = defineProps({
   // 用户信息
   AuthorInfo: {
      type: Object as any,
   },
   // 用户配置
   AuthorConfig: {
      type: Object as any,
   },
   // 是否是自己
   ismy: {
      type: Boolean
   }
})

// 立即绑定：邮箱
const emailDialogVisible = ref(false) // 弹窗
const email = ref('')                 // 邮箱号
const emailcode = ref('')             // 邮箱验证码
const getemailcode = async () => {    // 获取邮箱验证码
   const res: any = await cnyzsRequest('/api/cnyzs-verify-change/sendUsermailNew', {
      method: 'POST',
      data: { usermail: email.value }
   })
   if (res.status !== 200) return ElMessage.error(res.message)
   ElMessage.success(res.message)
}
const emailbinding = async () => {    // 绑定邮箱请求 
   if (!email.value) return ElMessage.warning('请输入邮箱')
   if (!emailcode.value) return ElMessage.warning('请输入验证码')
   const res: any = await cnyzsRequest('/api/cnyzs-verify-change/bindingEmail', {
      method: 'POST',
      data: { usermail: email.value, code: emailcode.value }
   })
   if (res.status !== 200) return ElMessage.error(res.message)
   ElMessage.success(res.message)
   props.AuthorInfo.usermail = email.value
   emailDialogVisible.value = false
}

// 立即绑定：手机
// 绑定手机弹窗
const phoneDialogVisible = ref(false)
const phone = ref('')
const phonecode = ref('')
const getphonecode = async () => {

}
const phonebinding = async () => { 

}




// 立即绑定：密保
// 设置密保弹窗
const securityDialogVisible = ref(false)


// 辅助数据
const state = ref({
   changeType: '', // 更改类型：更改邮箱：email，更改手机：phone：，更改密码：password
   title: '请选择验证方式',
   verificationMode: '', // 手机，邮箱，密保，
})
// 点击 更改邮箱 更改密码 唤起弹窗
// 弹窗开关
const centerDialogVisible = ref(false)
const clickDialog = (type: string) => {
   state.value.changeType = type
   centerDialogVisible.value = true
}
// 选择验证方式
const verifyMode = ref('') // 默认未空
const selectVerifyMode = (mode: string) => {
   verifyMode.value = mode // 切换到验证方式
   if (state.value.changeType === 'password') state.value.title = '修改密码'
   if (state.value.changeType === 'phone') state.value.title = '更改手机'
   if (state.value.changeType === 'email') state.value.title = '更改邮箱'
}
// 弹窗关闭前的回调 
const beforeClose = (done: Function) => {
   done()
   setTimeout(() => { verifyMode.value = ''; state.value.title = '请选择验证方式'; active.value = 0 }, 500);
}
// 验证三部曲
const active = ref(0)


// 发送用户邮箱验证码请求
// 无需传参，通过TOKEN获取邮箱
const mailcode = ref('') // 验证码值
const sendUsermail = async () => {
   const res: any = await cnyzsRequest('/api/cnyzs-verify-change/sendUsermail', { method: 'POST' })
   if (res.status === 200) {
      ElMessage.success(res.message)
   } else {
      ElMessage.error(res.message)
   }
}
// 点击下一步，验证用户邮箱请求
const verifyUsermail = async () => {
   if (!mailcode.value) return ElMessage.warning('请输入验证码')
   const res: any = await cnyzsRequest('/api/cnyzs-verify-change/verifyUsermail', {
      method: 'POST',
      data: {
         code: mailcode.value
      }
   })
   setTimeout(() => {
      if (res.status !== 200) return ElMessage.error(res.message)
      active.value = active.value + 1
   }, 1500);
}


// 点击下一步：确认修改用户密码
const loading = ref(false)
const newPassword1 = ref('')
const newPassword2 = ref('')
const changeUserPassword = async () => {
   if (!newPassword1.value) return ElMessage.warning('请输入新密码')
   if (!newPassword2.value) return ElMessage.warning('请输入确认密码')
   if (newPassword1.value !== newPassword2.value) return ElMessage.warning('密码不一致')
   loading.value = true
   // 发请求，更改密码
   const res: any = await cnyzsRequest('/api/cnyzs-verify-change/changeUserPassword', {
      method: 'POST',
      data: {
         password1: newPassword1.value,
         password2: newPassword2.value,
      }
   })
   setTimeout(() => {
      loading.value = false
      if (res.status !== 200) return ElMessage.error(res.message)
      active.value = 2
      mailcode.value = ''
      ElMessage.success("密码已更改")
   }, 1500);
}




// 发送新邮箱验证码
const loading2 = ref(false)
const mailValue = ref('')
const mailValueCode = ref('')
const sendUsermailNew = async () => {
   const res: any = await cnyzsRequest('/api/cnyzs-verify-change/sendUsermailNew', {
      method: 'POST',
      data: { usermail: mailValue.value }
   })
   if (res.status === 200) {
      ElMessage.success(res.message)
   } else {
      ElMessage.error(res.message)
   }
}
// 点击下一步：绑定新邮箱
const changeUserMail = async () => {
   if (!mailValue.value) return ElMessage.warning('请输入新邮箱号')
   if (!mailValueCode.value) return ElMessage.warning('请输入验证码')
   loading2.value = true
   // 发请求，更改密码
   const res: any = await cnyzsRequest('/api/cnyzs-verify-change/changeUserMail', {
      method: 'POST',
      data: {
         usermail: mailValue.value,
         code: mailValueCode.value,
      }
   })
   setTimeout(() => {
      loading2.value = false
      if (res.status !== 200) return ElMessage.error(res.message)
      active.value = 2
      mailValue.value = ''
      mailValueCode.value = ''
      ElMessage.success('更改邮箱成功')
   }, 1500);
}




</script>
<style lang="scss" scoped>
input {
   width: 100%;
   height: 45px;
   border: 0;
   font-size: 16px;
   background-color: #FFF;
   border-radius: 4px;
   caret-color: var(--aoir-color-primary-2);
   padding: 0 10px;
   border-radius: var(--aoir-border-radius);
   box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);

   &::placeholder {
      color: #CCD0DB;
   }
}

button {
   background: #3f3f3f;
   border: 0;
   box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.1);
   color: #fdfdfd;
   cursor: pointer;
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 600;
   height: 35px;
   justify-content: center;
   margin-right: 15px;
   padding: 0 15px;
   transition: all 0.2s;
   border-radius: 10px;

   &:hover {
      opacity: .8;
   }
}

.author-set-basic-setup {
   .header-title {
      width: 100%;
      height: 48px;
      font-size: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(238, 238, 238, 0.5058823529);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
   }

   .content {
      width: 100%;

      .box {
         display: flex;
         flex-wrap: wrap;

         .box-item {
            width: 452px;
            margin-right: 16px;
            margin-bottom: 35px;
            display: flex;

            &:nth-child(2n) {
               margin-right: 0;
            }

            &:nth-last-child(1),
            &:nth-last-child(2) {
               margin-bottom: 15px;
            }

            .box-item-left {
               width: 60px;
               height: 60px;
               border-radius: 50%;
               margin-right: 15px;
               background-color: #5e5e5e;
               display: flex;
               justify-content: center;
               align-items: center;

               .iconfont {
                  font-size: 70px;
                  color: #FFF;
               }
            }

            .box-item-right {

               .right-name {
                  font-size: 16px;
                  margin-bottom: 8px;
               }

               .right-desc {
                  font-size: 13px;
                  color: #999999;
                  margin-bottom: 8px;
               }

               .right-btn {
                  display: flex;
                  align-items: center;

                  .b1,
                  .b3 {
                     padding: 6px 8px;
                     font-size: 13px;
                     border-radius: 7px;
                     margin-right: 15px;
                     cursor: default;
                     background-color: #e5e9ef;
                     color: #abb4c1;
                     border-radius: 5px;
                     text-align: center;
                     width: 80px;
                  }

                  .b2 {
                     color: #ff5722;
                     font-size: 14px;
                     cursor: pointer;

                     &:hover {
                        opacity: .7;
                     }
                  }

                  .b3 {
                     background-color: rgb(97 97 97);
                     color: #FFF;
                     transition: all .2s;
                     cursor: pointer;

                     &:hover {
                        opacity: .7;
                     }
                  }
               }

            }
         }
      }
   }
}


.verification-mode {
   .mode-item {
      width: 100%;
      height: 90px;
      background-color: #e5e9ef94;
      margin-bottom: 15px;
      border-radius: var(--aoir-border-radius);
      display: flex;
      align-items: center;
      padding: 0 20px;

      &:nth-last-child(1) {
         margin: 0;
      }

      .item-content {
         flex: 1;
         display: flex;
         align-items: center;

         .content-left {
            width: 65px;
            height: 65px;
            border-radius: 500px;
            margin-right: 20px;
            background-color: #DD445B;
            display: flex;
            justify-content: center;
            align-items: center;

            .iconfont {
               color: #FFF;
               font-size: 75px;
            }
         }

         .content-right {
            .name {
               font-size: 16px;
               color: #333;
               margin-bottom: 10px;
            }

            .desc {
               color: #999;
            }
         }
      }

      // .item-btn {
      //    // width: 150px;
      // }
   }
}

.mode {
   .mode-form {
      width: 65%;
      margin: 0 auto;
      margin-top: 20px;

      .form-top {
         display: flex;
         align-items: center;
         width: 100%;
         height: 42px;
         background-color: #f5f7fa;
         border-radius: 7px;
         border: 1.5px solid #eee;
         overflow: hidden;

         .name {
            width: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-right: 1.5px solid #EEE;
            border-color: #e4e7ed;
         }

         .email {
            padding: 0 20px;
            display: flex;
            align-items: center;
            color: #AAA;
            border-color: #e4e7ed;
            color: #c0c4cc;
         }
      }

      .form-bottom {
         display: flex;
         align-items: center;
         margin-bottom: 20px;
      }

      .form-btn {
         width: 100%;
         display: flex;
         justify-content: center;

         button {
            width: 150px;
            height: 42px;
         }
      }
   }
}

:deep(.el-step__title.is-process) {
   color: var(--aoir-color-primary);
}

:deep(.el-step.is-simple .el-step__head) {
   display: none; // 隐藏步骤图标
}

:deep(.el-step.is-simple .el-step__arrow::after),
:deep(.el-step.is-simple .el-step__arrow::before) {
   height: 10px;
   width: 2px;
   border-radius: 52px;
}

:deep(.el-step.is-simple .el-step__arrow::after) {
   transform: rotate(32deg) translateY(4px);
   transform-origin: 100% 100%;
}

:deep(.el-step.is-simple .el-step__arrow::before) {
   transform: rotate(329deg) translateY(-4px);
   transform-origin: 0 0;
}

:deep(.el-result .icon-success) {
   --el-result-color: #4CAF50;
   color: #4CAF50;
}

:deep(.el-button:focus),
:deep(.el-button:hover) {
   background-color: var(--aoir-color-primary) !important;
   outline: 0;
}
</style>